<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
    <!-- <el-button class="editor-clear" type="text" @click="clear">清空</el-button> -->
  </div>
</template>
<script>
  import commonApi from '@/api/common'
  import tinymce from "tinymce/tinymce";
  import Editor from "@tinymce/tinymce-vue";
  import 'tinymce/themes/silver/theme'
  // 编辑器插件plugins
  // 更多插件参考：https://www.tiny.cloud/docs/plugins/
  import "tinymce/plugins/image"; // 插入上传图片插件
  import 'tinymce/plugins/media' // 插入视频插件
  import "tinymce/plugins/table"; // 插入表格插件
  import "tinymce/icons/default"; // 插入表格插件
  import "tinymce/plugins/lists"; // 列表插件
  import "tinymce/plugins/wordcount"; // 字数统计插件
  export default {
    components: {
      Editor
    },
    props: {
      value: {
        type: String,
        default: ""
      },
      type: {
        type: Number,
        default: 1
      },
      // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
      // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
      baseUrl: {
        type: String,
        default: ""
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default: "lists image media table wordcount"
        // default:''
      },
      // 在toolbar中添加工具栏相应按钮
      toolbar: {
        type: [String, Array],
        default: 'code undo redo restoredraft  | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | | fullscreen | bdmap indent2em lineheight formatpainter axupimgs| table image media charmap emoticons hr pagebreak insertdatetime print preview | bullist numlist | cut copy paste pastetext\
        styleselect formatselect fontselect fontsizeselect | blockquote subscript superscript removeformat'

      }
    },
    data() {
      return {
        init: {
          language_url: `/static/tinymce/langs/zh_CN.js`, // 语言包路径
          language: "zh_CN", //语言
          skin_url: `/static/tinymce/skins/ui/oxide`, //skin路径
          content_css: `/static/tinymce/skins/content/default/content.css`,
          // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系
          // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
          height: 500, //编辑器高度
          plugins: this.plugins,
          toolbar: this.toolbar,
          branding: false, //是否禁用“Powered by TinyMCE”
          menubar: false, //顶部菜单栏显示
          paste_data_images: true, // 允许粘贴图像
          importcss_append: true,
          toolbar_mode: 'wrap',
          toolbar_sticky: true,
          fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
          // 此处为图片上传处理函数
          // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
          //    添加扩展插件
          external_plugins: {
            'powerpaste': '/static/tinymce/plugins/powerpaste/plugin.min.js'
          },
          images_upload_handler: (blobInfo, success, failure) => {
            console.log(blobInfo)
            const that = this
            // success('https://obs-18059865572.obs.cn-south-1.myhuaweicloud.com:443/bank/CodeMe/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/20211124110939_6358%E6%96%87%E5%AD%97%EF%BC%89-01.jpg');
            // return;
            var formdata = new FormData();
            formdata.append('folder', 'richText')
            formdata.append('file_name', blobInfo.blob())
            commonApi.uploadFile(formdata).then(res => {
              console.log(res, '图片上传')
              if (res.code == 200) {
                success(res.data.domain + res.data.url)
              } else {
                failure(err)
              }
            }).catch(err => {
              console.log(err)
              failure(err)
            })
            // Api.uploadFile.execute(data, 'img_url', blobInfo.blob()).then(res => {
            //   if (res.code == '0001') {
            //     // console.log(res)
            //     success(res.data)
            //   } else {
            //     failure('error')
            //   }
            // }).catch(err => {
            //   console.log(err)
            //   failure(err)
            // })
          },
        },
        myValue: this.value
      };
    },
    mounted() {
      tinymce.init({});
    },
    methods: {
      // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
      // 需要什么事件可以自己增加
      onClick(e) {
        this.$emit("onClick", e, tinymce);
      },
      // 可以添加一些自己的自定义事件，如清空内容
      clear() {
        this.myValue = "";
      }
    },
    watch: {
      value: {
        handler(val) {
          this.myValue = val
        },
        deep: true
      },
      myValue: {
        handler(val) {
          this.$emit("input", val);
        },
        deep: true
      },
    }
  };

</script>
<style lang="scss">
  .tinymce-editor {
    width: 820px;
    position: relative;

    .editor-clear {
      position: absolute;
      right: 15px;
      top: 0px;
      z-index: 999;
    }
  }
</style>